<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学习兴税</title>
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/animate.css" />
    <link rel="stylesheet" href="../css/style.css" />
    <script src="../js/jquery.js"></script>
    <script src="../js/common.js"></script>
  </head>
  <body class="">
    <div id="questionList" class="comModal comModalCenter questionList">
      <div class="title">增值税在线答题</div>
      <div class="outsideBox">
        <div class="insideBox">
          <div class="questionInfo" id="questionInfo"></div>
          <div class="btnBox">
            <div class="prevBtn" onclick="backHome()">回主页</div>
            <div id="prevBtn" class="prevBtn hidden" onclick="prevQuestion()">
              上一题
            </div>
            <div id="nextBtn" class="nextBtn" onclick="nextQuestion()">
              下一题
            </div>
            <div id="sureBtn" class="sureBtn hidden" onclick="submitAnswer()">
              提交
            </div>
          </div>
          <div class="rightInfo">
            <div class="process">
              <div class="text">进度</div>
              <div class="processBox">
                <div class="processInfo" id="questionProcess"></div>
              </div>
            </div>
            <div class="questionNum" id="questionNum"></div>
            <img class="listRoboot" src="../images/robot2.png" />
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    $(function () {
      var href = location.href;
      var id = href.substr(href.indexOf("=") + 1, href.length) * 1;
      getQuestions(id).done(function (res) {
        var objMap = res.topicTypeMap || {};
        var list = [];
        for (var i in objMap) {
          var _list = objMap[i];
          _list.filter(function (v) {
            list.push(v);
          });
        }
        localStorage.setItem("examId", id);
        localStorage.setItem("tdId", res.tdId);
        window.tdId = res.tdId;
        window.questionInd = 0;
        window.questionList = list;
        setQuestion();
        setNumber();
        setWindow();
      });
    });
    //提交题目
    function submitAnswer() {
      var _list = window.questionList;
      var answer = [];
      var noAns = false;
      _list.filter(function (v) {
        var obj = { id: v.tpId, v: v.answer || "" };
        if (!v.answer) {
          noAns = true;
        }
        answer.push(obj);
      });
      // 拦截未答题  需要拦截放开即可
      //   if (noAns) {
      //     return alert("有题目未作答，请完成在提交！");
      //   }
      // return (location.href = "/html/result.html");
      // var params = new URLSearchParams();
      // params.append("tdId", window.tdId);
      // params.append("answer", JSON.stringify(answer));

      ajaxRequest({
        type: "POST",
        url: "/open/exam/submitExam",
        params: {
          tdId: window.tdId,
          answer: JSON.stringify(answer),
        },
        success: function (res) {
          localStorage.setItem("resData", JSON.stringify(res.data));
          location.href = "/html/result.html";
        },
        error: function (error) {
          // location.href = "/html/result.html";
        },
      });
    }
    //上一题
    function prevQuestion() {
      var questionInd = window.questionInd;
      var questionList = window.questionList;
      if (questionInd > 0) {
        questionInd--;
        window.questionInd = questionInd;
        $("#nextBtn").removeClass("hidden");
        $("#sureBtn").addClass("hidden");
        if (questionInd == 0) {
          $("#prevBtn").addClass("hidden");
        }
        setQuestion();
      }
    }
    //下一题
    function nextQuestion() {
      var questionInd = window.questionInd;
      var questionList = window.questionList;
      if (questionInd < questionList.length - 1) {
        questionInd++;
        window.questionInd = questionInd;
        $("#prevBtn").removeClass("hidden");
        if (questionInd == questionList.length - 1) {
          $("#nextBtn").addClass("hidden");
          $("#sureBtn").removeClass("hidden");
        }
        setQuestion();
      }
    }
    //处理题目展示
    function setQuestion() {
      var questionInd = window.questionInd;
      var questionList = window.questionList;
      var question = questionList[questionInd];
      var tpAnswer = question.tpAnswer ? JSON.parse(question.tpAnswer) : [];
      var html = "";
      var typeName =
        question.tpType == "01"
          ? "(单选题)"
          : question.tpType == "02"
          ? "(多选题)"
          : "(判断)";
      html +=
        '<div class="questionTitle">' +
        '<div class="number">' +
        (questionInd + 1) +
        "</div>" +
        '<div class="text">' +
        question.tpContent +
        typeName +
        "</div>" +
        "</div>" +
        '<div class="list">';
      var answer = [];
      if(question.hasAns){
        answer = question.answer.split('');
      }
      if (question.tpType == "01" || question.tpType == "02") { 
        tpAnswer.filter(function (v, i) {
          var _val = v.substr(0, 1);
          var _class = '';
          if(answer.includes(_val)){
            _class = ' checked'
          }
          html +=
            '<div class="item'+_class+'" data-val="' +
            _val + '" data-type="' + question.tpType + '">' +
            '<span class="checkBox"></span>' +
            '<div class="text">' +
            v +
            "</div>" +
            "</div>";
        });
      } else {
        html +=
          '<div class="item '+(answer.includes('Y')?'checked':'')+'" data-val="Y" data-type="' +
          question.tpType +
          '">' +
          '<span class="checkBox"></span>' +
          '<div class="text">正确</div>' +
          "</div>" +
          '<div class="item '+(answer.includes('N')?'checked':'')+'" data-val="N" data-type="' +
          question.tpType +
          '">' +
          '<span class="checkBox"></span>' +
          '<div class="text">错误</div>' +
          "</div>";
      }

      html += "</div>";
      $("#questionInfo").html(html);
      bindEvent();
    }
    //绑定答题事件
    function bindEvent() {
      $("#questionInfo")
        .off("click", ".item")
        .on("click", ".item", function () {
          var type = $(this).data("type");
          var val = "";
          if (type == "01" || type == "03") {
            if ($(this).hasClass("checked")) {
              $(this).removeClass("checked");
            } else {
              $(this).addClass("checked");
              val = $(this).data("val");
              $(this).siblings().removeClass("checked");
            }
          } else if (type == "02") {
            if ($(this).hasClass("checked")) {
              $(this).removeClass("checked");
            } else {
              $(this).addClass("checked");
            }
            var _checks = $(this).parent().find(".checked");
            if (_checks.length) {
              var _arr = [];
              $.each(_checks, function (i, d) {
                _arr.push($(d).data("val"));
              });
              val = _arr.join("");
            }
          }
          setQuestionAmswer(val);
        });
      $("#textArea")
        .off("input propertychange")
        .on("input propertychange", function () {
          var val = $(this).val();
          setQuestionAmswer(val);
        });
    }
    //设置答案
    function setQuestionAmswer(val) {
      var questionInd = window.questionInd;
      if (val) {
        window.questionList[questionInd].hasAns = true;
        window.questionList[questionInd].answer = val;
      } else {
        window.questionList[questionInd].hasAns = false;
        window.questionList[questionInd].answer = "";
      }
      setNumberColor();
      setProcess();
    }
    //设置圆点
    function setNumberColor() {
      var questionInd = window.questionInd;
      if (window.questionList[questionInd].hasAns) {
        $("#questionNum .item").eq(questionInd).addClass("active");
      } else {
        $("#questionNum .item").eq(questionInd).removeClass("active");
      }
    }
    //生成右侧圆点
    function setNumber() {
      var questionList = window.questionList;
      var htm = "";
      questionList.filter(function (v, i) {
        var _class = "item";
        if (v.hasAns) {
          _class += " active";
        }
        htm +=
          '<div class="' +
          _class +
          '" data-ind="' +
          i +
          '">' +
          (i + 1) +
          "</div>";
      });
      $("#questionNum").html(htm);
      $("#questionNum")
        .off("click", ".item")
        .on("click", ".item", function () {
          var ind = $(this).data("ind");
          if (ind == 0) {
            $("#prevBtn").addClass("hidden");
            $("#nextBtn").removeClass("hidden");
            $("#sureBtn").addClass("hidden");
          } else if (ind == window.questionList.length - 1) {
            $("#prevBtn").removeClass("hidden");
            $("#nextBtn").addClass("hidden");
            $("#sureBtn").removeClass("hidden");
          } else {
            $("#sureBtn").addClass("hidden");
            $("#prevBtn").removeClass("hidden");
            $("#nextBtn").removeClass("hidden");
          }
          numClick(ind);
        });
    }
    //处理右侧数字点击
    function numClick(ind) {
      window.questionInd = ind;
      setQuestion();
    }
    //处理进度
    function setProcess() {
      var questionList = window.questionList;
      var len = questionList.length;
      var ans = 0;
      questionList.filter(function (v, i) {
        if (v.hasAns) {
          ans++;
        }
      });
      var res = (ans / len).toFixed(4) * 100;
      $("#questionProcess").css("width", res + "%");
    }
  </script>
</html>
